Animated Portfolio Gallery with jQuery

Tutorials November 14, 2010 by Mary Lou 32 Comments

Today we will create an animated portfolio gallery with jQuery. The gallery will contain a scroller for thumbnails and a content area where we will display details about the portfolio item. The image can be enlarged by clicking on it, making it appear as an overlay.

The idea is to animate the content elements whenever a thumbnail is clicked. We will animate the heading from the top, fade out the previous image and slide the descriptions from the sides.

The great template collection for the demo can be found on DzineBlog.

Let’s start with the HTML structure.

The Markup

First we will create the structure for the content area. For that we will create a main div element with the class “pg_content”. Inside we will place the main heading with the class and id “pg_title”, the preview container with the id “pg_preview” and the description elements with the class “pg_description”. The description divs will also have an individual class, i.e. “pg_desc1″ and “pg_desc2″:

01<div class="pg_content">
02    <div id="pg_title" class="pg_title">
03        <h1 style="display:block;top:25px;">
04            Shape Company Website Design
05        </h1>
06        <h1>Summer of Love</h1>
07        ...
08    </div>
09    <div id="pg_preview">
10        <img class="pg_thumb" style="display:block;z-index:9999;" src="images/medium/1.jpg" alt="images/large/1.jpg"/>
11        <img class="pg_thumb" src="images/medium/2.jpg" alt="images/large/2.jpg"/>
12        ...
13    </div>
14    <div id="pg_desc1" class="pg_description">
15        <div style="display:block;left:250px;">
16            <h2>Project Description</h2>
17            <p>A description comes here</p>
18        </div>
19        <div>
20            <h2>Project Description</h2>
21            <p>A description comes here</p>
22        </div>
23        ...
24    </div>
25    <div id="pg_desc2" class="pg_description">
26        <div style="display:block;left:250px;">
27            <h2>Technologies Used</h2>
28            <p>A text comes here</p>
29        </div>
30        <div>
31            <h2>Technologies Used</h2>
32            <p>A text comes here</p>
33        </div>
34        ...
35    </div>
36</div>

All the first elements inside of those containers will have a specific inline style, making them visible when we load the page. The rest of the elements will have their style defined in the CSS, i.e. their position when they are hidden.

The thumbnails scroller will have the following structure (based on Manos Malihu’s thumbnail scroller):

01<div id="thumbContainter">
02    <div id="thumbScroller">
03        <div class="container">
04            <div class="content">
05                <div>
06                    <a href="#">
07                        <img src="images/thumbs/1.jpg" alt="" class="thumb" />
08                    </a>
09                </div>
10            </div>
11            <div class="content">
12                ...
13            </div>
14            ...
15        </div>
16    </div>
17</div>

And finally, we will add a div for the semi-transparent overlay:

`1`	`<div` `id="overlay"></div>`

Let’s take a look at the style.

The CSS

We start by resetting the margins and paddings, and by the general body style:

01*{
02    margin:0;
03    padding:0;
04}
05body{
06    background: #564c4c url(../webtreats2.jpg) repeat top left;
07    font-family:"Trebuchet MS","Myriad Pro", Helvetica, sans-serif;
08    font-size:12px;
09    color: #111;
10    overflow-x:hidden;
11}

This and more beautiful background images can be found on http://webtreats.mysitemyway.com.
The overlay is going to have the following style:

01#overlay{
02    position:fixed;
03    top:0px;
04    left:0px;
05    width:100%;
06    height:100%;
07    background: #000;
08    display:none;
09    opacity:0.9;
10}

If you want this to work in IE, please add the filter opacity property.
The style for the thumbnail slider will be the following:

01#thumbContainter{
02    position:fixed;
03    top:0px;
04    left:0px;
05    bottom:0px;
06    margin:0;
07    width:175px;
08    padding:0 10px;
09    background:transparent url(../bg.png) repeat top left;
10    border-right:1px solid #f0f0f0;
11    -moz-box-shadow:-2px 0px 10px #000 inset;
12    -webkit-box-shadow:-2px 0px 10px #000 inset;
13    box-shadow:-2px 0px 10px #000 inset;
14}
15#thumbScroller{
16    position:relative;
17    height:600px;
18    overflow:hidden;
19    left:-180px;
20}
21#thumbScroller .container{
22    position:relative;
23    top:0;
24    float:left;
25}
26#thumbScroller .content{
27    clear:both;
28    float:left;
29}
30#thumbScroller .content div{
31    padding:2px;
32    height:100%;
33    float:left;
34}
35#thumbScroller .content a{
36    outline:none;
37}
38#thumbScroller img{
39    border:5px solid #000;
40    -moz-box-shadow:0px 0px 2px #000;
41    -webkit-box-shadow:0px 0px 2px #000;
42    box-shadow:0px 0px 2px #000;
43}

All the elements in the content area will be placed absolutely:

1img.pg_thumb,
2img#pg_large,
3.pg_title h1,
4.pg_content .pg_description div
5{
6    position:absolute;
7}

The description divs will be not be displayed initially:

1.pg_content .pg_description div{
2    display:none;
3}

The main heading will have a black patterned background image, just like the main thumbnail container. The position will be set to the values where the element will not be visible, hence we will have a top of -50px:

1.pg_title h1{
2    display:none;
3    left:250px;
4    top:-50px;/*25*/
5    background:transparent url(../bg.png) repeat top left;
6    padding:10px 20px;
7    color:#fff;
8    font-weight:bold;
9}

We will then animate the top to 25px to make the heading visible.

The thumb needs to be hidden, too:

1img.pg_thumb{
2    display:none;
3}

The large preview of the image will be created when we click on a portfolio item in the content area. It will have the highest z-index:

1img#pg_large{
2    z-index:9999;
3}

The style of the thumbnail in the content area and the style of the large preview will be as follows:

1img.pg_thumb,
2img#pg_large{
3    top:90px;
4    left:250px;
5    padding:10px;
6    background:transparent url(../bg.png) repeat top left;
7    cursor:pointer;
8}

The descriptions and their headlines are going to have the following style:

01.pg_description h2{
02    color:#000;
03    font-size:22px;
04    margin-bottom:10px;
05    background:transparent url(../bg2.png) repeat top left;
06    padding:5px;
07}
08.pg_description p{
09    font-size:14px;
10    width:500px;
11    padding:10px;
12    overflow:hidden;
13    text-shadow:0px 0px 1px #fff;
14    background:transparent url(../bg.png) repeat top left;
15    color:#fff;
16}

and finally we need to define the positions of the description divs:

1#pg_desc1 div{
2    top:420px;
3    left:205px;
4}
5#pg_desc2 div{
6    top:560px;
7    left:295px;
8}

And that was the style. Let’s check out the JavaScript next.

The JavaScript

The main idea is to create the scrollable thumbnails container, and to provide the transitions of the content elements. Also, we need to define what happens when we click on a medium image in the content area to view the large image preview.
First, let’s define some variables:

01//index of current item
02var current             = 0;
03//speeds / ease type for animations
04var fadeSpeed           = 400;
05var animSpeed           = 600;
06var easeType            = 'easeOutCirc';
07//caching
08var $thumbScroller      = $('#thumbScroller');
09var $scrollerContainer  = $thumbScroller.find('.container');
10var $scrollerContent    = $thumbScroller.find('.content');
11var $pg_title           = $('#pg_title');
12var $pg_preview         = $('#pg_preview');
13var $pg_desc1           = $('#pg_desc1');
14var $pg_desc2           = $('#pg_desc2');
15var $overlay            = $('#overlay');
16//number of items
17var scrollerContentCnt  = $scrollerContent.length;
18var sliderHeight        = $(window).height();
19//we will store the total height
20//of the scroller container in this variable
21var totalContent        = 0;
22//one items height
23var itemHeight          = 0;

Then, we want to create the scrollable thumbnails container, after all its thumbnail images are loaded:

01var cnt     = 0;
02$thumbScroller.find('img').each(function(){
03    var $img    = $(this);
04    $('<img alt="">').load(function(){
05        ++cnt;
06        if(cnt == scrollerContentCnt){
07            //one items height
08            itemHeight = $thumbScroller.find('.content:first').height();
09            buildScrollableItems();
10            //show the scrollable container
11            $thumbScroller.stop().animate({
12                'left':'0px'
13            },animSpeed);
14        }
15    }).attr('src',$img.attr('src'));
16});

When we click on a thumbnail in the scrollable container, we want to display the according content elements. We will use the index of the thumbnail in order to know which title, image and description to show:

01$scrollerContent.bind('click',function(e){
02    var $this               = $(this);
03 
04    var idx                 = $this.index();
05    //if we click on the one shown then return
06    if(current==idx) return;
07 
08    //if the current image is enlarged,
09    //then we will remove it, but before
10    //we will animate it just like we will do it with the thumb
11    var $pg_large           = $('#pg_large');
12    if($pg_large.length > 0){
13        $pg_large.animate({
14            'left':'350px',
15            'opacity':'0'
16        },animSpeed,function(){
17            $pg_large.remove();
18        });
19    }
20 
21    //get the current and clicked item's elements
22    var $currentTitle       = $pg_title.find('h1:nth-child('+(current+1)+')');
23    var $nextTitle          = $pg_title.find('h1:nth-child('+(idx+1)+')');
24    var $currentThumb       = $pg_preview.find('img.pg_thumb:eq('+current+')');
25    var $nextThumb          = $pg_preview.find('img.pg_thumb:eq('+idx+')');
26    var $currentDesc1       = $pg_desc1.find('div:nth-child('+(current+1)+')');
27    var $nextDesc1          = $pg_desc1.find('div:nth-child('+(idx+1)+')');
28    var $currentDesc2       = $pg_desc2.find('div:nth-child('+(current+1)+')');
29    var $nextDesc2          = $pg_desc2.find('div:nth-child('+(idx+1)+')');
30 
31    //the new current is now the index of the clicked scrollable item
32    current                 = idx;
33 
34    //animate the current title up,
35    //hide it, and animate the next one down
36    $currentTitle.stop().animate({
37        'top':'-50px'
38    },animSpeed,function(){
39        $(this).hide();
40        $nextTitle.show().stop().animate({
41            'top':'25px'
42        },animSpeed);
43    });
44 
45    //show the next image,
46    //animate the current to the left and fade it out
47    //so that the next one gets visible
48    $nextThumb.show();
49    $currentThumb.stop().animate({
50        'left': '350px',
51        'opacity':'0'
52    },animSpeed,function(){
53        $(this).hide().css({
54            'left'      : '250px',
55            'opacity'   : 1,
56            'z-index'   : 1
57        });
58        $nextThumb.css({
59            'z-index':9999
60        });
61    });
62 
63    //animate both current descriptions left / right and fade them out
64    //fade in and animate the next ones right / left
65    $currentDesc1.stop().animate({
66        'left':'205px',
67        'opacity':'0'
68    },animSpeed,function(){
69        $(this).hide();
70        $nextDesc1.show().stop().animate({
71            'left':'250px',
72            'opacity':'1'
73        },animSpeed);
74    });
75    $currentDesc2.stop().animate({
76        'left':'295px',
77        'opacity':'0'
78    },animSpeed,function(){
79        $(this).hide();
80        $nextDesc2.show().stop().animate({
81            'left':'250px',
82            'opacity':'1'
83        },animSpeed);
84    });
85    e.preventDefault();
86});

When we click on a thumbnail in the content area (the medium picture), it will animate to the size of the large image. Then we will load the large image and insert it after the thumbnail. We just need to hide the thumbnail then, in order to display the large image:

01$pg_preview.find('.pg_thumb').bind('click',showLargeImage);
02 
03//enlarges the thumb
04function showLargeImage(){
05    //if theres a large one remove
06    $('#pg_large').remove();
07    var $thumb      = $(this);
08    $thumb.unbind('click');
09    var large_src   = $thumb.attr('alt');
10 
11    $overlay.fadeIn(200);
12    //animate width to 600px,height to 500px
13    $thumb.stop().animate({
14        'width' : '600px',
15        'height': '500px'
16    },500,function(){
17        $('<img id="pg_large">').load(function(){
18            var $largeImg = $(this);
19            $largeImg.insertAfter($thumb).show();
20            $thumb.hide().css({
21                'left'      : '250px',
22                'opacity'   : 1,
23                'z-index'   : 1,
24                'width'     : '360px',
25                'height'    : '300px'
26            });
27            //when we click the large image
28            //we revert the animation
29            $largeImg.bind('click',function(){
30                $thumb.show();
31                $overlay.fadeOut(200);
32                $(this).stop().animate({
33                    'width' : '360px',
34                    'height': '300px'
35                },500,function(){
36                    $(this).remove();
37                    $thumb.css({'z-index'   : 9999});
38                    //bind again the click event
39                    $thumb.bind('click',showLargeImage);
40                });
41 
42            });
43        }).attr('src',large_src);
44    });
45}

When we resize the window, the scroller’s height needs to be adapted to the new window height:

1$(window).resize(function() {
2    var w_h         = $(window).height();
3    $thumbScroller.css('height',w_h);
4    sliderHeight    = w_h;
5});

And finally, the function for creating the scroller container (adapted from Manos’ script, check it out here: Manos Malihu’s thumbnail scroller)

01function buildScrollableItems(){
02    totalContent = (scrollerContentCnt-1)*itemHeight;
03    $thumbScroller.css('height',sliderHeight)
04    .mousemove(function(e){
05        if($scrollerContainer.height()>sliderHeight){
06            var mouseCoords     = (e.pageY - this.offsetTop);
07            var mousePercentY   = mouseCoords/sliderHeight;
08            var destY          
 = 
-(((totalContent-(sliderHeight-itemHeight))-sliderHeight)*(mousePercentY));
09            var thePosA         = mouseCoords-destY;
10            var thePosB         = destY-mouseCoords;
11            if(mouseCoords==destY)
12                $scrollerContainer.stop();
13            else if(mouseCoords>destY)
14                $scrollerContainer.stop()
15                .animate({
16                    top: -thePosA
17                },
18                animSpeed,
19                easeType);
20            else if(mouseCoords

And that’s all! If you want to add some spice by cufonizing the headlines, you can add the following lines to the head of your HTML:

1<script src="js/cufon-yui.js" type="text/javascript"></script>
2<script src="js/Quicksand_Book_400.font.js" type="text/javascript"></script>
3<script type="text/javascript">
4    Cufon.replace('h1,h2');
5</script>

You can find the beautiful Quicksand and other awesome fonts on www.fontsquirrel.com.

We hope you enjoyed the tutorial and find it useful!

View demo Download source

Tagged with: animated, gallery, images, jQuery, portfolio

Discussion³² Join the discussion

Ignacio
November 14th, 2010 at 22:21
Awesome, very clean javascript code. Love it, great work!
Assaad Abou-Rached
November 14th, 2010 at 22:56
Amazing work, as usual
Keep up the great work
Meera
November 15th, 2010 at 06:44
I have downloaded your script but in it Left thumbnail panel not displaying can you check it and give me proper download zip then we appreciate it , bye the way gr8 work thanks for sharing..
namik
November 15th, 2010 at 08:29
Woowww….
Realy nice work, thnx 4 ur effort
catalin
November 15th, 2010 at 08:51
The download package isn’t working.
Jireck
November 15th, 2010 at 09:18
Great as always…
Clean Jquery code
Nice Html code
Thanks Mary Lou
edis
November 15th, 2010 at 09:35
I am using Chrome and i see basiaclly the same bug i wrote about in one of the other tutorials, full page image gallery tutorial . . .
Anil
November 15th, 2010 at 10:32
I can’t believe this is too gud. I like the work may b i’d like to use it on my website.
Mary Lou
November 15th, 2010 at 11:06
@Meera @Catalin I have updated the ZIP file and now it is working! Sorry for that! Thank you all for your great feedback! Cheers, ML
Beben Koben
November 15th, 2010 at 12:10
a little difficult in the right clicking on the scroll boss?
if we click a picture, how do I return again?
awesome job…ty \m/
DBR
November 15th, 2010 at 19:00
WOW!
This is so beautifiul!
Alex Flueras
November 15th, 2010 at 19:38
Another outstanding example of jQuery effect shared with us. Thanks so much!
misaeljuvenal
November 15th, 2010 at 19:41
very nice
Josh
November 15th, 2010 at 20:47
Looks great in Chrome and Safari, but Firefox 4.0b7 for mac is looking completely glitched for me.
Anybody else getting this?
Great tutorial though, as usual!
Max
November 15th, 2010 at 22:41
This is so beautifiul!
Kijan Maharjan
November 16th, 2010 at 06:12
Awesome…as ever….
Grafics
November 16th, 2010 at 14:46
Great !
Very good thing…
tech blog
November 17th, 2010 at 07:31
great as always…..
Mike
November 17th, 2010 at 15:12
I noticed that you didn’t have a license anywhere on your code. I’m assuming this is free to use?? (Weird question, I know but I need to ask for work. :-) )
Great work by the way.
Mary Lou
November 17th, 2010 at 17:02
Thank you all for your great feedback!
@Mike, yes it is free for personal and commercial use, thanks for asking!
Peter Benson
November 18th, 2010 at 02:11
This is beautiful
Great Job
Marc Farré
November 20th, 2010 at 12:21
Nice, thanks !
dantario
November 23rd, 2010 at 06:02
Awesome, Awesome, Awesome, Awesome. and Awesome (again :).
amit
December 1st, 2010 at 00:33
I really liked your work.
hi just want to ask if i want to add some more thumails and pages wht i hav to do. Plz if u can let me soon it will be great.
JayC
December 1st, 2010 at 05:27
Hey,
Can I just directly use this as an internal static page in my wordpress based website?! A total cipher in web programming…
mohammadreza
December 1st, 2010 at 08:07
very very good
tanks
Smoke
December 1st, 2010 at 12:30
who needs varsity…? ..i got it all here
Jan
December 5th, 2010 at 23:45
Really great script! I want to add previous en next buttons can someone help me?
Priya Mehta
December 13th, 2010 at 17:28
Converted Portfolio in Joomla Version check it http://bit.ly/i0S6kM
assadotcom
December 18th, 2010 at 16:56
Hey Mary Lou,
Your Blog is My Design Inspiration ^_^
Like This ^_^
Converted Animated Portfolio Gallery with jQuery to Blogger »»» http://assadesign.blogspot.com/
loga
December 23rd, 2010 at 11:25
thanks for sharing this nice tutorial it is more helpful to all keep sharing
ayushi
December 23rd, 2010 at 14:34
i have started to do this portfolio.. so many doubt